<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现单选切换</title>
		<script src="js/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		选择图形类型：
		<input type="radio" id="" name="ty"/>circle
		<input type="radio" name="ty" value="" />rectangle
		<input type="radio" id="" name="ty" />triangle 
		<table border="0" cellspacing="0" cellpadding="3px">
			<tr>
				<td>请输入圆的半径：</td>
				<td><input type="" name="" id="" value="" /></td>
			</tr>
			<tr>
				<td><button >工厂模式计算</button></td>
				<td><button>策略模式计算</button></td>
			</tr>
		</table>
		
		<table border="0" cellspacing="0" cellpadding="3px">
			<tr>
				<td>请输入矩形的宽度：</td>
				<td><input type="" name="" id="" value="" /></td>
			</tr>
			<tr>
				<td>请输入矩形的高度</td>
				<td><input type="" name="" id="" value="" /></td>
			</tr>
			<tr>
				<td><button >工厂模式计算</button></td>
				<td><button>策略模式计算</button></td>
			</tr>
		</table>
		
		<table border="0" cellspacing="0" cellpadding="3px">
			<tr>
				<td>请输入三角形的第一边：</td>
				<td><input type="" name="" id="" value="" /></td>
			</tr>
			<tr>
				<td>请输入三角形的第二边：</td>
				<td><input type="" name="" id="" value="" /></td>
			</tr>
			<tr>
				<td>请输入三角形的第三边：</td>
				<td><input type="" name="" id="" value="" /></td>
			</tr>
			<tr>
				<td><button >工厂模式计算</button></td>
				<td><button>策略模式计算</button></td>
			</tr>
		</table>
		<script>
		$("table").hide();
		$("input:radio").eq(0).click(function(){
			$("table").eq(0).show();
			$("table").eq(1).hide();
			$("table").eq(2).hide();
		});
		$("input:radio").eq(1).click(function(){
		$("table").eq(1).show();
		$("table").eq(0).hide();
		$("table").eq(2).hide();
		});
		$("input:radio").eq(2).click(function(){
			$("table").eq(2).show();
			$("table").eq(0).hide();
			$("table").eq(1).hide();
		});
		</script>
	</body>
</html>
